<template>
  <div class="service">
    <div class="service-item mb-3" v-for="item in serviceList" :key="item.title">
      <div class="service-item-title flex pb-3 items-center">
        <span class="text-3.8"> {{ item.title }}</span>
        <span>{{ item.icon }}</span>
        <router-link to="" class="flex items-center ml-2" v-if="item.tips">
          <span class="text-sm text-gray-400">{{ item.tips }}</span>
          <el-icon size="14"><ArrowRight /></el-icon>
        </router-link>
      </div>
      <div class="service-item-content flex gap-2">
        <div
          v-for="item in item.children"
          :key="item.title"
          class="flex items-baseline bg-gray-100 p-2 rounded-lg cursor-pointer border-1 hover:bg-red-100 hover:border-1 hover:border-red-500"
        >
          <span class="text-3.5"> {{ item.title }}</span>
          <span class="text-4 font-600 ml-1">￥{{ item.price }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { ArrowRight } from "@element-plus/icons-vue";

const serviceList = ref([
  {
    title: "精选特惠",
    tips: "屏幕电池免费换新",
    link: "",
    icon: "✨",
    children: [
      {
        title: "2年碎屏+4年电池",
        tips: "",
        link: "",
        price: "359.00",
      },
      {
        title: "1年只换不修",
        tips: "",
        link: "",
        price: "129.00",
      },
    ],
  },
  {
    title: "碎屏无忧",
    tips: "",
    link: "",
    icon: "",
    children: [
      {
        title: "2年碎屏+4年电池",
        tips: "",
        link: "",
        price: "359.00",
      },
      {
        title: "1年只换不修",
        tips: "",
        link: "",
        price: "129.00",
      },
    ],
  },
  {
    title: "电池换新",
    tips: "",
    link: "",
    icon: "⚡",
    children: [
      {
        title: "2年碎屏+4年电池",
        tips: "",
        link: "",
        price: "359.00",
      },
      {
        title: "1年只换不修",
        tips: "",
        link: "",
        price: "129.00",
      },
    ],
  },
  {
    title: "手机维修",
    tips: "",
    link: "",
    icon: "",
    children: [
      {
        title: "2年碎屏+4年电池",
        tips: "",
        link: "",
        price: "359.00",
      },
      {
        title: "1年只换不修",
        tips: "",
        link: "",
        price: "129.00",
      },
    ],
  },
]);
</script>
